<template>
	<view>
		<view class="yb-tabbar yb-flex" :style="rootStyle">
			<view class="yb-tabbars yb-flex yb-row yb-align-center" :style="{'border-top-color': optionsSync.borderColor}">
				<view
				class="yb-tabbar-item yb-flex yb-flex-1 yb-align-center yb-justify-center"
				v-for="(item, index) in data" :key="index"
				@tap="onChange(index)">
					<view class="yb-tabbar-item-icon yb-flex yb-justify-center">
						<slot :name="item.value">
							<yb-icon
							v-if="item.type == 'icon'"
							:name="currentSync == index ? item.focusIcon : item.icon"
							:size="item.iconSize || optionsSync.iconSize"
							:color="currentSync == index ? optionsSync.focus : optionsSync.iconColor">
							</yb-icon>
							<template v-else>
								<image :style="{width: item.iconSize, height: item.iconSize}" :src="currentSync == index ? item.focusIcon : item.icon" mode="aspectFit"></image>
							</template>
						</slot>
					</view>
					<text :style="{'font-size': optionsSync.size + 'rpx', color: currentSync == index ? optionsSync.focus : optionsSync.color}">{{item.label}}</text>
				</view>
			</view>
			<yb-safe-bottom></yb-safe-bottom>
		</view>
		<template v-if="fixed">
			<view class="yb-flex" style="height: 100rpx;"></view>
			<yb-safe-bottom></yb-safe-bottom>
		</template>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: {
				type: Number,
				default: 0
			},
			fixed: {
				type: Boolean,
				default: false
			},
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		data () {
			return {
				currentSync: 0
				
			}
		},
		computed: {
			rootStyle () {
				return this.filterStyle(
					this.fixed ? {
						position: 'fixed',
						left: 0,
						right: 0,
						bottom: 0,
						'background-color': this.optionsSync.bgColor
					} : {
						'background-color': this.optionsSync.bgColor
					}
				)
			},
			optionsSync () {
				return Object.assign({}, {
					bgColor: '#fff',
					size: 24,
					color: '#333',
					iconColor: '#333',
					iconSize: 40,
					focus: '#2ca2f9',
					borderColor: '#eee',
				}, this.options)
			}
		},
		created () {
			this.currentSync = this.value
		},
		methods: {
			onChange (current) {
				this.currentSync = current
				this.$emit('input', this.currentSync)
			}
		},
		watch: {
			value (newVal) {
				this.currentSync = newVal
			}
		}
	}
</script>

<style scoped>
.yb-tabbar {
	position: relative;
	z-index: 1;
}
.yb-tabbars {
	height: 100rpx;
	border-top-width: 1px;
	border-top-style: solid;
}
.yb-tabbar-item-icon {
	height: 60rpx;
	text-align: center;
}
</style>
